﻿<template>
    <div v-cloak>
        <component is="style" />
        <div v-on:click="openData" class="color-999">
            <div v-if="!fieldValue">{{placeholder}}</div>
            <div v-else :class="{'color-black-1':!disabled}" style="min-height:20px;">{{fieldValue}}</div>
        </div>
        <hxt-popup v-model="show" :title="title" round closeable="closeable" :get-container="getContainer">
            <van-cascader v-model="cascaderValue"
                          :title="title"
                          :options="data"
                          :field-names="fieldNames" :show-header="false" :closeable="false" :active-color="activeColor" :placeholder="placeholder" v-on:finish="finish">

            </van-cascader>
        </hxt-popup>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'wxCascader',
            props: {
                value: {
                    type: [String | Number],
                    default: function () {
                        return '';
                    }
                },
                text: {
                    type: [String | Number],
                    default: function () {
                        return '';
                    }
                },
                title: {
                    type: String,
                    default: function () {
                        return '';
                    }
                },
                data: {
                    type: Array,
                    default: function () {
                        return [];
                    }
                },
                placeholder: {
                    type: String,
                    default: function () {
                        return '请选择';
                    }
                },
                activeColor: {
                    type: String,
                    default: function () {
                        return '#ee0a24';
                    }
                },
                closeable: {
                    type: Boolean,
                    default: function () {
                        return true;
                    }
                },
               
                fieldNames : {
                    type: Object,
                    default: function () {
                        return { text: 'text', value: 'value', children: 'children' };
                    }
                },
                getContainer: {
                    type: [String, Function],
                    default: function () {
                        return null;
                    }
                },
                //是否禁用组件
                disabled: {
                    type: Boolean,
                    'default': function () {
                        return false
                    }
                },
            },
            data: function () {
                return {
                    show: false,
                    fieldValue:'',
                };
            },
            computed: {
                cascaderValue: {
                    get: function () {
                        return this.value;
                    },
                    set: function (val) {
                        this.$emit('input', val);
                    }
                }
            },
            watch: {
               
            },
            activated: function () { },
            mounted: function () {
                this.fieldValue = this.text;
            },
            destroyed: function () {
                
            },
            methods: {
                openData: function (e) {
                    var _this = this;
                    if (!!_this.disabled) return;
                    if (!_this.$listeners['load']) {
                        if (_this.data.length == 0) return hxt.error("列表为空");
                        _this.show = true;
                        return;
                    };
                    this.$emit('load', function (res) {
                        if (res.length == 0) return hxt.error("列表为空");
                        _this.show = true;
                        _this.data = res;
                    });
                },
                finish: function (e) {
                    var _this = this;
                    _this.fieldValue = e.selectedOptions.map((option) => option['text']).join('/');
                    _this.show = false;
                    _this.$emit('change', e.selectedOptions);
                },
                //#endregion
            },
            components: {
               
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .video-recorder {
        background-color: #2E2E2E;
        padding-top: 0;
    }

        .video-recorder video {
            background-color: #242424;
        }

        .video-recorder .van-empty__image {
            display: none;
        }
</style>